﻿﻿﻿﻿﻿﻿@extends('admin.Default')
@section('type')
    <link href="{{ asset('myadmin/css/plugins/iCheck/custom.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dataTables/dataTables.bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/webuploader/webuploader.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dropzone/basic.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dropzone/dropzone.css') }}" rel="stylesheet">
@stop
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><a data-toggle="modal" class="" href="#modal-form-one" >添加顶级分类</a></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li><a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th style="display: none">隐藏()</th>

                                <th>分类名</th>
                                {{--<th style="display:none;">商家ID</th>--}}
                                <th>路径</th>
                                <th>所属</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            @foreach($list as $k=>$v)
                                <tr class="gradeX" id="{{ $k+1 }}">
                                    <td>{{ $k+1 }}</td>
                                    <td style="display: none">{{ $v['id'] }}</td>
                                    <td>{{ $v['name'] }}</td>
{{--                                    <td style="display:none">{{$v['store_id']}}</td>--}}
                                    <td>{{ $v['path'] }}
                                    </td>
                                    <td>{{ $v['pname'] }}</td>
                                    <td class="centercenter">
                                        <a data-toggle="modal" class="btn btn-primary" href="#modal-form" onclick="typeSon(this)">添加子版块</a>
                                        <a  class="btn btn-primary" onclick="delType(this)">删除</a>
                                        <a data-toggle="modal" class="btn btn-primary" onclick="editType(this)" href="#modal-form-edit">修改</a></td>


                                </tr>
                            @endforeach
                            </tbody>


                        </table>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Mainly scripts -->
    <div id="modal-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">添加子分类</h3>
                            <div class="form-group">
                                <label>父类：</label>
                                <input type="text" id="pname" placeholder="" disabled class="form-control">
                            </div>
                            <div class="form-group">
                                <label>子类：</label>
                                <input type="text" placeholder="子分类名" class="form-control" id="sub-son">
                            </div>
                            <div>
                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"    onclick="subSon()" ><strong>提交</strong>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-edit" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">更改版块名称</h3>


                            <div class="form-group">
                                <label>原名称：</label>
                                <input type="text" id="yname" placeholder="" disabled class="form-control">
                            </div>
                            <div class="form-group">
                                <label>新名称：</label>
                                <input type="text" placeholder="新名称" class="form-control" id="sub-edit">
                            </div>
                            <div>

                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="edit()" ><strong>更改</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-one" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">添加顶级分类</h3>

                            <div class="form-group">
                                <label>顶级：</label>
                                <input type="text" placeholder="顶级分类名" class="form-control" id="sub-top">
                            </div>
                            <div>
                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="subTop()"><strong>提交</strong>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
    <!-- iCheck -->
    <script src="{{ asset('myadmin/webuploader/webuploader.min.js') }}"></script>
    <script src="{{ asset('myadmin/js/plugins/dropzone/dropzone.js') }}"></script>
    <script>
        $(document).ready(function () {
//            //第一个
//            $('.i-checks').iCheck({
//                checkboxClass: 'icheckbox_square-green',
//                radioClass: 'iradio_square-green',
//            });

            //第二个
            $('.dataTables-example').dataTable();
            /* Init DataTables */
            var oTable = $('#editable').dataTable();

            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable('../example_ajax.php', {
                "callback": function (sValue, y) {
                    var aPos = oTable.fnGetPosition(this);
                    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                },
                "submitdata": function (value, settings) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition(this)[2]
                    };
                },
                "width": "90%",
                "height": "100%"
            });

            //第三个
            Dropzone.options.myAwesomeDropzone = {

                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,

                // Dropzone settings
                init: function () {
                    var myDropzone = this;

                    this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });
                    this.on("sendingmultiple", function () {});
                    this.on("successmultiple", function (files, response) {});
                    this.on("errormultiple", function (files, response) {});
                }

            }


        });

        function subTop() {
            //alert('111');
            var name = $('#sub-top').val();
            var lg = $('#tbody').children('tr');
            $.ajax({
                url: '{{url("store/category/add")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                //pic和store_id应该是传过来的

                data: {_token: "{{ csrf_token() }}", name: name, pid: 0, path: '0,', pic:'category.jpg'},
                success: function (data) {
        if(lg.length < 10) {
            var jiou=(lg.length/2==1)?'odd':'even';
                var tr = '<tr class="gradeX '+jiou+'" id="'+(lg.length+1)+'"><td class="sorting_1">' + (lg.length + 1) + '</td><td style="display: none">' + data.id + '</td><td>' + data.name + '</td><td>' + data.path + '</td><td>' + data.pname + '</td><td class="center"><a data-toggle="modal" class="btn btn-primary" href="#modal-form"onclick="typeSon(this)">添加子版块</a>&nbsp;<a class="btn btn-primary" onclick="delType(this)">删除</a>&nbsp;<a data-toggle="modal" class="btn btn-primary" onclick="editType(this)" href="#modal-form-edit">修改</a></td></tr>';
                // alert(tr);
                $('#tbody').append(tr);
            }
                    $('#sub-top').val('');
                    $('#modal-form-one').modal('hide');

                },
                error: function (data) {

                },
            });
        }
        //点击修改弹出界面
        function editType(obj) {
            //获取原节点名字  11（测试）
            var name = $(obj).parentsUntil('#tbody').children('td').eq(2).html();
            //获取原节点id
            yid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            did =  $(obj).parent().parent().attr('id');
            //把原节点名添加到模态框
            $('#yname').val(name);
        }
        //添加子版块找到父版块节点
        function typeSon(obj) {
            //获取父节点名字
            var name = $(obj).parentsUntil('#tbody').children('td').eq(2).html();
//            var name = $(obj).parents('tr.gradeX').children('td').eq(2).html();
            console.log(name);
            console.log('aa');
            //获取父节点id
            pid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
//            pid = $(obj).parents('tr.gradeX').children('td').eq(1).html();
            //把父节点名添加到模态框
            $('#pname').val(name);
        }
        function subSon() {
            var name = $('#sub-son').val();
            var lg = $('#tbody').children('tr');
            $.ajax({
                url: '{{url("store/category/add")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", name:name, pid:pid, store_id : 1 , path:'',pic:'category.jpg' },
                success: function (data) {
                    if(lg.length<10) {
                        var jiou=(lg.length/2)==1?'odd':'even';
                        var tr = '<tr class="gradeX '+jiou+'" id="'+(lg.length+1)+'"><td  class="sorting_1">' + (lg.length + 1) + '</td><td style="display: none">' + data.id + '</td><td>' + data.name + '</td><td>' + data.path + '</td><td>' + data.pname + '</td><td class="center"><a data-toggle="modal" class="btn btn-primary" href="#modal-form" onclick="typeSon(this)">添加子版块</a>&nbsp;<a class="btn btn-primary" onclick="delType(this)">删除</a>&nbsp;<a data-toggle="modal" class="btn btn-primary" onclick="editType(this)" href="#modal-form-edit">修改</a></td></tr>';
                        $('#tbody').append(tr);
                    }
                    $('#sub-son').val("");
                    $('#pname').val('');
                    $('#modal-form').modal('hide');

                },
//                error: function (data) {
//                    //alert('111');
//                    console.log();
//                },

                error: function (data) {
                    console.log("添加子分类失败");

                },
            });
        }

        function edit() {
            var name = $('#sub-edit').val();

            var id = yid;
//            var lg = $('#tbody').children('tr');


            $.ajax({
                url: '{{ url("store/category/edit") }}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}",name:name,id:id },
                success: function (data) {
                    if(data>0){
                        $('#'+did).children('td').eq(2).html(name);
                    }

//                    $('#modal-form').css('color','red');
                    $('#modal-form').mode('hide');
                },
                error: function (data) {
//                    alert(111111);
                },
            });
        }
        function delType(obj) {

            var id = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
//            alert(id);
            $.ajax({
                url: '{{url("store/category/query")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", id:id },
                success: function (data) {
                    if(confirm(data.name)){
                        //alert("点击了确认按钮");
                        var id = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
                        //alert(id);
                        $.ajax({
                            url: '{{url("store/category/del")}}',
                            type: 'POST',
                            dataType: 'json',
                            cache: false,
                            data: {_token: "{{ csrf_token() }}", id: id},
                            success: function (data) {
                                if(data>0){
                                    $(obj).parent().parent().remove();

                                }

                                // alert(data);
                                // $('#modal-form-one').modal('hide');
                            },
                            error: function (data) {
//                                alert("删除时候确认以后ajax提交删除功能没有实现");
                            },
                        });
                    }
                    else{

//                        alert("删除时点击了取消按钮");

                    }


                },
                error: function (data) {
//                    alert('删除前查询失败!');
                },
            });

        }
    </script>
    <script>
        function fnClickAddRow() {
            $('#editable').dataTable().fnAddData([
                "Custom row",
                "New row",
                "New row",
                "New row",
                "New row"]);

        }

    </script>


@stop